<template>
	<div>
		<div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item><i class="el-icon-date"></i>人事管理</el-breadcrumb-item>
                <el-breadcrumb-item>人员信息变动</el-breadcrumb-item>
            </el-breadcrumb>
        </div>

		<!--工具条-->
		<el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
			<el-form :inline="true" :model="search" label-width="80px">
				<el-form-item label="编号">
					<el-input v-model="search.s_employee_Id" size="small" placeholder="编号"></el-input>
				</el-form-item>
				<el-form-item label="姓名">
					<el-input v-model="search.s_f_per_name" size="small" placeholder="姓名"></el-input>
				</el-form-item>
				<el-form-item label="一级部门">
					<el-input v-model="search.s_f_dpt_name" size="small" placeholder="一级部门"></el-input>
				</el-form-item>
				<el-form-item label="二级部门">
					<el-input v-model="search.s_f_sub_dptname" size="small" placeholder="二级部门"></el-input>
				</el-form-item>
				<el-form-item label="三级部门">
					<el-input v-model="search.s_f_dtl_dptname" size="small" placeholder="三级部门"></el-input>
				</el-form-item>
				<el-form-item label="四级部门">
					<el-input v-model="search.s_f_subdtl_name" size="small" placeholder="四级部门"></el-input>
				</el-form-item>
				<el-form-item label="性别">
					<el-select v-model="search.s_f_sex" size="small" placeholder="请选择性别">
						<el-option label="所有" value=""></el-option>
						<el-option label="男" value="0"></el-option>
						<el-option label="女" value="1"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="在职状态">
					<el-select v-model="search.s_f_leave_sign" size="small" placeholder="请选择状态">
						<el-option label="所有" value=""></el-option>
						<el-option label="在职" value="0"></el-option>
						<el-option label="离职" value="1"></el-option>
					</el-select>
				</el-form-item>
				
				<el-row class="clear-margin">
					<el-form-item label="入职日期">
						<el-col :span="11">
							<el-form-item>
								<el-date-picker type="date" v-model="search.s_f_enter_date_start" value-format="yyyy-MM-dd" size="small" style="100%" placeholder="开始日期"></el-date-picker>
							</el-form-item>
						</el-col>
						<el-col class="line" :span="2">-</el-col>
						<el-col :span="11">
							<el-form-item>
								<el-date-picker type="date" v-model="search.s_f_enter_date_end" value-format="yyyy-MM-dd" size="small" style="100%" placeholder="结束日期"></el-date-picker>
							</el-form-item>
						</el-col>
					</el-form-item>
				</el-row>
				
				<el-row class="clear-margin">
					<el-form-item label="离职日期">
						<el-col :span="11">
							<el-form-item>
								<el-date-picker type="date" v-model="search.s_f_leave_date_start" value-format="yyyy-MM-dd" size="small" style="100%" placeholder="开始日期"></el-date-picker>
							</el-form-item>
						</el-col>
						<el-col class="line" :span="2">-</el-col>
						<el-col :span="11">
							<el-form-item>
								<el-date-picker type="date" v-model="search.s_f_leave_date_end" value-format="yyyy-MM-dd" size="small" style="100%" placeholder="结束日期"></el-date-picker>
							</el-form-item>
						</el-col>
					</el-form-item>
				</el-row>
				<el-row class="clear-margin" style="text-align: center;">
					<el-form-item>
						<el-button type="primary" @click="searchTable">查询</el-button>
					</el-form-item>
					<el-form-item>
						<el-button type="info" @click="resetForm(search)">重置</el-button>
					</el-form-item>
					<el-form-item>
						<el-button type="success" icon="document" @click="handleDownload" :loading="downloadLoading">导出excel</el-button>
					</el-form-item>
				</el-row>
			</el-form>
		</el-col>

		<!--列表-->
		<el-table :data="data" border highlight-current-row v-loading="listLoading" :stripe="true" :fit="true" style="width: 100%;">
			<el-table-column type="expand">
				<template slot-scope="props">
					<el-form label-position="left" inline class="demo-table-expand">
						<el-form-item label="编号">
							<span>{{props.row.employee_Id}}</span>
						</el-form-item>
						<el-form-item label="姓名">
							<span>{{props.row.name}}</span>
						</el-form-item>
						<el-form-item label="性别">
							<span>{{props.row.f_sex}}</span>
						</el-form-item>
						<el-form-item label="在职状态">
							<span>{{formatLeaveSign(props.row)}}</span>
						</el-form-item>
						<el-form-item label="一级部门">
							<span>{{props.row.dpt_name}}</span>
						</el-form-item>
						<el-form-item label="二级部门">
							<span>{{props.row.sub_dptname}}</span>
						</el-form-item>
						<el-form-item label="三级部门">
							<span>{{props.row.dtl_dptname}}</span>
						</el-form-item>
						<el-form-item label="四级部门">
							<span>{{props.row.subdtl_name}}</span>
						</el-form-item>
						<el-form-item label="级别">
							<span>{{props.row.duty_name}}</span>
						</el-form-item>
						<el-form-item label="岗位">
							<span>{{props.row.positionname}}</span>
						</el-form-item>
						<el-form-item label="上级领导">
							<span>{{props.row.f_per_name}}</span>
						</el-form-item>
						<el-form-item label="手机号码">
							<span>{{props.row.f_szmobile}}</span>
						</el-form-item>
						<el-form-item label="邮箱">
							<span>{{props.row.f_email}}</span>
						</el-form-item>
						<el-form-item label="离职日期">
							<span>{{props.row.f_leave_date}}</span>
						</el-form-item>
						<el-form-item label="入职日期">
							<span>{{props.row.f_enter_date}}</span>
						</el-form-item>
						<el-form-item label="信息更新日期">
							<span>{{props.row.create_date}}</span>
						</el-form-item>
					</el-form>
				</template>
			</el-table-column>

			<!-- <el-table-column type="selection" width="55"></el-table-column> -->
			<el-table-column type="index" width="60"></el-table-column>
			<el-table-column prop="employee_Id" label="编号" min-width="90" sortable></el-table-column>
			<el-table-column prop="name" label="姓名" min-width="90" sortable></el-table-column>
			<el-table-column prop="f_sex" label="性别" min-width="90" sortable></el-table-column>
			<el-table-column prop="f_leave_sign" label="在职状态" min-width="120" :formatter="formatLeaveSign" sortable></el-table-column>
			<el-table-column prop="dpt_name" label="一级部门" min-width="120" sortable></el-table-column>
			<!-- <el-table-column prop="sub_dptname" label="二级部门" min-width="120" :formatter="formatNullValue" sortable></el-table-column>
			<el-table-column prop="dtl_dptname" label="三级部门" min-width="120" :formatter="formatNullValue" sortable></el-table-column>
			<el-table-column prop="subdtl_name" label="四级部门" min-width="120" :formatter="formatNullValue" sortable></el-table-column> -->
			<el-table-column prop="duty_name" label="级别" min-width="100" sortable></el-table-column>
			<el-table-column prop="positionname" align="center" label="岗位" min-width="100" :formatter="formatNullValue" sortable></el-table-column>
			<el-table-column prop="f_per_name" align="center" label="上级领导" min-width="120" :formatter="formatNullValue" sortable></el-table-column>
			<!-- <el-table-column prop="f_szmobile" label="手机号码" min-width="120" :formatter="formatNullValue" sortable></el-table-column>
			<el-table-column prop="f_email" label="邮箱" min-width="120" :formatter="formatNullValue" sortable></el-table-column> -->
			<!-- <el-table-column prop="f_leave_date" label="离职日期" min-width="120" :formatter="formatNullValue" sortable></el-table-column> -->
			<el-table-column prop="f_enter_date" label="入职日期" min-width="150" sortable>
				<template scope="scope">
					<el-icon name="time"></el-icon>
					<span style="margin-left: 10px;">{{scope.row.f_enter_date}}</span>
				</template>
			</el-table-column>
			<!-- <el-table-column prop="create_date" label="信息更新日期" min-width="230" sortable>
				<template scope="scope">
					<el-icon name="time"></el-icon>
					<span style="margin-left: 10px;">{{scope.row.create_date}}</span>
				</template>
			</el-table-column> -->

			<!-- 
			<el-table-column label="操作" width="150">
				<template scope="scope">
					<el-button size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
					<el-button type="danger" size="small" @click="handleDel(scope.$index, scope.row)">删除</el-button>
				</template>
			</el-table-column> -->

		</el-table>
		<div class="pagination">
            <el-pagination
                    @current-change ="handlePageChange"
                    @size-change="handleSizeChange"
                    :page-sizes="[10, 20, 50, 100]"
                    :page-size="pagination.pageSize"
                    :current-page="pagination.page"
                    layout="sizes, prev, pager, next"
                    :total="pagination.total">
            </el-pagination>
        </div>
	</div>
</template>

<script>
export default {
	data(){
		return {
			downloadLoading: false,
			data: [],

			// 报表配置-分页数据
			pagination: {
				// 分页大小
				pagesize: 10,
				// 当前页
				page: 1,
				// 所有页总数
				total: 1,
			},

			search: {
				s_employee_Id: '',
				s_name: '',
				s_f_dpt_name: '',
				s_f_sub_dptname: '',
				s_f_subdtl_name: '',
				s_f_per_name: '',
				s_sex: '',
				s_f_leave_sign: '',
				s_f_enter_date_start:'',
				s_f_enter_date_end:'',
				s_f_leave_date_start:'',
				s_f_leave_date_end:''
				
			}
		}
	},
	mounted: function(){
		this.searchTable();
	},
	methods:{
		// 格式化在职与离职状态
		formatLeaveSign: function(row, column){
			return row.f_leave_sign ? '离职' : '在职';
		},
		formatNullValue: function(row, column){
			return row[column] ? row[column] : '-------';
		},
		handlePageChange: function(currentPage){
			this.$http.post('/api/hrm/query', {search: this.search, page: currentPage, rows: this.pagination.pagesize}, {emulateJSON: true}).then(response=>{
				this.pagination.total = response.data.total;
				this.data = response.data.rows;
			}, response=>{
				console.log('Ajax can not get the data from server !!');
			});
		},
		// 改变页面大小
		handleSizeChange: function(size){
			this.pagination.pagesize = size;
			this.handlePageChange(this.pagination.page);
		},
		// 表格查询
		searchTable: function(){
			this.$http.post('/api/hrm/query', {search: this.search, page: this.pagination.page, rows: this.pagination.pagesize}, {emulateJSON: true}).then(response => {
				this.pagination.total = response.data.total;
				this.data = response.data.rows;
			}, response => {
				console.log('Ajax can not get the data from the server!!!');
			});
		},
		// 重置表单数据
		resetForm: function(obj){
			for (let item in obj){
				obj[item] = '';
			}
		},

		// 导出excel文件
		handleDownload: function(){
			this.downloadLoading = true;
			require.ensure([], () => {
				const { export_json_to_excel } = require('../../vendor/Export2Excel');
				const tHeader = ["编号" ,"姓名" ,"性别" ,"在职状态" ,"一级部门" ,"二级部门" ,"三级部门" ,"四级部门" ,"级别" ,"岗位" ,"上级领导" ,"手机号码" ,"邮箱" ,"离职日期" ,"入职日期" ,"信息更新日期"];
				const filterVal = ["employee_Id" ,"name" ,"f_sex" ,"f_leave_sign" ,"dpt_name" ,"sub_dptname" ,"dtl_dptname" ,"subdtl_name" ,"duty_name" ,"positionname" ,"f_per_name" ,"f_szmobile" ,"f_email" ,"f_leave_date" ,"f_enter_date" ,"create_date"];
				const list = this.data;
				const data = this.formatJSON(filterVal, list);
				export_json_to_excel(tHeader, data, '人事人员信息');
				this.downloadLoading = false;
			});
		},
		// 格式化JSON
		formatJSON: function(filterVal, jsonData){
			return jsonData.map(v => filterVal.map(j => {
				if (j === 'timestamp'){
					return parseTime(v[j]);
				} else {
					return v[j];
				}
			}));
		}
	},
	watch: {
		'search': function(value){
			console.log(value);
		}
	}
}
</script>

<style>
	.toolbar .el-input__inner{
	    width: 215px !important;	
	}
	.clear-margin{
		margin-bottom: 0px;
	}
	.demo-table-expand{
		font-size: 0;
	}
	.demo-table-expand label{
		width: 100px;
		color: #99a9bf;
	}
	.demo-table-expand .el-form-item{
		margin: 0 !important;
		width: 25%;
	}
	.line{
		text-align: center;
	}
	.el-col > .el-form-item--mini.el-form-item, 
	.el-col > .el-form-item--small.el-form-item{
		margin-bottom: 0;
	}
</style>